<template>
	<!-- 下单页 -->
	<view class="purchase">
		<!-- 店铺信息 -->
		<view class="storeInfo">
			<!-- 店名 -->
			<view class="store-name" @click="toMap">
				<text class="store-name__title">{{shopInfo.name}}</text>
				<i class="iconfont icon-xiangyou1"></i>
			</view>
			<!-- 位置 -->
			<view class="store-pos">
				距离您{{shopInfo.distance}}km | {{shopInfo.address}}
			</view>
			<!-- 描述 -->
			<view class="store-desc">
				平台严守疫情防控，坚持每日测温，点单更安心。
			</view>
		</view>
		<!-- 领券 -->
		<view class="coupon">
			<u-cell-group :border="false">
				<u-cell isLink>
					<view slot="title" class="coupon-cell">
						<text class="coupon-cell__title">领券</text>
						<u-tag text="优惠" borderColor="#ff516b" color="#ff516b" plain size="mini"></u-tag>
						<u-tag text="黑色星期四" borderColor="#ff516b" bgColor="#ff516b" size="mini"></u-tag>
						<u-tag text="限时领取" borderColor="#ff516b" bgColor="#ff516b" size="mini"></u-tag>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<!-- 商品分类与商品列表 -->
		<view class="productList" :style="paddingBottom">
			<cp-goods-select height="100%" :options="goodsListWithClassify">
				<cp-goods-item v-for="(item,index) in goodsListWithClassify" :key="index" :category="item.label">
					<block v-for="(good,i) in item.s_goods" :key="good.id">
						<!-- 商品卡片 组件 -->
						<goodCard :good="good" @clickSku="showSku(good)">
							<template #desc>
								一杯约42颗青提(含青提果汁部分)，优选新鲜阳光玫瑰青提...
							</template>
						</goodCard>
					</block>
				</cp-goods-item>
			</cp-goods-select>
		</view>
		<!-- 商品规格弹窗 -->
		<view class="sku">
			<vk-data-goods-sku-popup ref="skuPopup" v-model="isShowSku" border-radius="0" :localdata="goodSkuInfo"
				:defaultSelect="defaultSelect" :mode="2" @open="onOpenSkuPopup" @close="onCloseSkuPopup"
				@add-cart="addCart"></vk-data-goods-sku-popup>
		</view>

		<!-- 底部结算组件 -->
		<cart v-if="cartGoods.length" :cartGoods="cartGoods" @numChanged="numChanged" @clear="clearAll"
			@pay="toCreateOrder"></cart>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	// 引入自定义函数库
	import utils from '@/utils/index.js'

	export default {
		data() {
			return {
				// 店铺信息
				shopInfo: {
					id: 0,
					name: '瑞幸咖啡',
					distance: 2.4,
					address: '广东省广州市天河区广州塔路'
				},
				// 是否弹出商品规格
				isShowSku: false,
				// 分类下的商品信息
				goodsListWithClassify: [],
				// 商品规格信息
				goodSkuInfo: {},
				// 默认选中的商品规格
				defaultSelect: {
					sku: [],
					num: 1,
				},
				// 购物车商品信息
				cartGoods: []
			}
		},
		computed: {
			...mapState(['userInfo']),
			/* 样式 */
			// 购物车有商品时显示底部结算栏，商品列表需要预留底部空间
			paddingBottom() {
				return this.cartGoods.length ? 'paddingBottom: 80rpx' : '';
			},
		},
		methods: {
			// 跳转到map页
			toMap() {
				this.$Router.push('/map');
			},
			// 跳转到确认订单页
			toCreateOrder() {
				this.$Router.push('/create_order');
			},
			// 请求分类下的商品信息
			async getgoodsByClassify() {
				let data = await this.$api.classify.getGoodsByClassifyAPI();
				// 保存分类下的商品信息
				this.goodsListWithClassify = data.result;
			},
			// 请求商品信息
			async getInfo(good) {
				// 商品id
				let id = good.id;
				// console.log('请求商品详细信息', id);

				let reqQuene = [];
				// 请求商品规格信息
				reqQuene.push(this.$api.good.getSkuAPI(id));
				// 请求单个商品信息
				reqQuene.push(this.$api.good.getGoodInfoAPI(id));
				// 发送请求
				let [skuData, goodData] = await Promise.all(reqQuene);

				/* 数据处理 */
				let skuInfo = skuData.result;
				let goodInfo = goodData.result;
				// console.log(skuData, goodData);

				// 所有sku列表
				let allSkuList = [];
				// 1 保存所有sku数据
				let spec_list = skuInfo.property.map(item => {
					let name = item.keyName;
					let list = item.s_attributesValues.map(sku => {
						// 保存所有sku列表（原始数据）
						allSkuList.push(sku);
						return {
							name: sku.attribute_value
						}
					});
					return {
						list,
						name
					}
				});

				// 2 保存商品的sku数据（按照组件vk-data-goods-sku-popup需要的格式保存）
				let sku_list = skuInfo.stock_list.map(sku => {
					// 将商品sku字符id转换为数组形式保存
					let skuCodeSet = sku.goods_specs.split(',');
					// 反查字符id，转换为汉字
					let sku_name_arr = allSkuList
						.filter(s => skuCodeSet.includes(String(s.id)))
						.map(s => s.attribute_value);
					// console.log(sku_name_arr);

					return {
						_id: sku.id,
						goods_id: goodInfo.id,
						goods_name: goodInfo.name,
						image: goodInfo.s_goods_photos[0].path,
						price: sku.goods_price * 100,
						sku_name_arr,
						stock: sku.goods_stock
					}
				});

				// 3 最终处理完的数据
				let skuResult = {
					_id: goodInfo.id,
					name: goodInfo.name,
					goods_thumb: goodInfo.s_goods_photos[0].path,
					sku_list,
					spec_list
				};
				// console.log(skuResult);

				// 添加到分类下的商品信息中
				good.sku = uni.$u.deepClone(skuResult);
				// console.log(good);
			},
			// 展示商品规格弹窗
			async showSku(good) {
				// 如果用户未登录
				if (!this.userInfo && !await utils.reqUserInfoAuth()) return;

				if (!good.sku) {
					// 获取商品规格
					await this.getInfo(good);
				}

				// 选中商品的规格信息
				this.goodSkuInfo = good.sku;

				// 设置默认选中规格
				this.defaultSelect.sku = this.goodSkuInfo?.sku_list[0]?.sku_name_arr;
				// console.log(this.defaultSelect.sku);

				// 弹出sku面板
				this.isShowSku = true;
			},
			// 获取购物车信息
			async getCartGoods() {
				let {
					result: cartGoodsList
				} = await this.$api.cart.getGoodsInCartAPI();

				// 保存购物车商品信息(过滤数据)
				this.cartGoods = cartGoodsList.map(g => {
					return {
						id: g.id,
						goods_id: g.s_good.id,
						name: g.s_good.name,
						image: g.s_good.s_goods_photos[0].path,
						num: g.num,
						price: g.s_good.price,
						sale_price: g.s_good.sale_price
					}
				});
				// console.log(this.cartGoods);
			},
			// 添加商品到购物车
			async addGoodToCart(option) {
				let data = await this.$api.cart.addGoodToCartAPI(option);
				uni.showToast({
					title: data.msg,
					icon: 'none'
				});
				// 更新购物车信息
				await this.getCartGoods();
				// 关闭sku面板
				this.isShowSku = false;
			},
			// 修改购物车商品数量
			async updateCart(id, num) {
				let data = await this.$api.cart.updateCartAPI(id, num);
				// 更新购物车信息
				this.getCartGoods();
			},
			// 删除购物车中的商品
			async deleteGoodInCart(id) {
				let data = await this.$api.cart.deleteGoodInCartAPI(id);
				// 更新购物车信息
				this.getCartGoods();
			},
			// 修改购物车商品数量回调
			numChanged(value, id) {
				// console.log(value, id);
				let num = value.value;
				if (num == 0) {
					// 如果数量为0，就删除购物车中的商品
					let bar = this.deleteGoodInCart.bind(this, id);
					// 做防抖处理
					uni.$u.debounce(bar, 500);
					return;
				}
				// 使函数的this指向vue实例
				let fn = this.updateCart.bind(this, id, num);
				// 做防抖处理
				uni.$u.debounce(fn, 500);
			},
			// 购物袋清空按钮回调
			async clearAll() {
				// 购物车没有商品，跳出函数
				if (!this.cartGoods.length) return;
				// 将所有删除请求添加到请求集合
				let reqQuene = this.cartGoods.map(g => {
					return new Promise((resolve, reject) => {
						resolve(this.$api.cart.deleteGoodInCartAPI(g.id));
					});
				});
				await Promise.all(reqQuene);
				// 更新购物车信息
				this.getCartGoods();
			},
			// 打开SKU执行
			onOpenSkuPopup() {},
			// 关闭sku执行
			onCloseSkuPopup() {},
			// 加入购物车执行
			addCart(selectShop) {
				// console.log(selectShop);
				// 添加商品到购物车
				let option = {
					goods_id: selectShop.goods_id,
					num: selectShop.buy_num,
				}
				this.addGoodToCart(option);
			},
		},
		onShow() {
			// 获取分类下的商品信息
			this.getgoodsByClassify();
			if (this.userInfo) {
				// 获取购物车内的商品信息
				this.getCartGoods();
			}

			// 获取店铺信息
			let shop = uni.getStorageSync('shopInfo');
			if (shop) {
				// 保存店铺信息
				this.shopInfo = JSON.parse(shop);
			}

		}
	}
</script>

<style lang="scss" scoped>
	.purchase {
		@include page-bgc();
		display: flex;
		flex-direction: column;
		height: 100vh;

		// 店铺信息
		.storeInfo {
			flex-shrink: 0;
			padding: 30rpx 20rpx;
			background-color: #fff;

			// 店名
			.store-name {
				display: flex;
				align-items: center;

				.store-name__title,
				i.iconfont {
					font-size: 32rpx;
					color: #000;
					font-weight: 700;
					margin-right: 2px;
				}
			}

			// 位置
			.store-pos {
				font-size: 22rpx;
				color: #999;
				margin-top: 10rpx;
			}

			// 描述
			.store-desc {
				font-size: 24rpx;
				color: #666;
				margin-top: 20rpx;
			}
		}

		// 领券
		.coupon {
			flex-shrink: 0;
			background-color: #fff;
			margin: 2px 0;

			.coupon-cell {
				display: flex;
				align-items: center;

				.coupon-cell__title {
					font-size: 26rpx;
					color: #999;
					margin-right: 20rpx;
				}

				::v-deep .u-tag-wrapper {
					margin-right: 10rpx;

					.u-tag {
						height: 36rpx;

						.u-tag__text {
							font-size: 20rpx;
						}
					}
				}
			}
		}

		// 商品分类与商品列表
		.productList {
			flex: 1;
			background-color: #fff;
			overflow: auto;

			// 修改分类组件默认样式
			::v-deep {
				cp-goods-select {
					height: 100%;

					.cp-goods-select-category {
						background-color: #f6f6f6;
					}

					.cp-goods-select-category-item {
						font-size: 28rpx;
						text-align: center;
						padding-left: 0;
						padding-right: 0;

						&.actived {
							color: $theme-color;
							background-color: #fff;

							&::before {
								width: 0;
							}
						}
					}

					.cp-goods-select-goods__classify {
						position: relative;
						color: #000;
						font-size: 32rpx;
						margin-left: 20rpx;
						background-color: #fff;
					}
				}
			}
		}

		// 弹窗样式
		::v-deep .u-popup {
			flex: none;
		}

		// 规格弹出层
		::v-deep .vk-data-goods-sku-popup {
			z-index: 99999999;
		}
	}
</style>